<!--
 * @Author: your name
 * @Date: 2021-07-04 21:34:46
 * @LastEditTime: 2021-07-06 22:15:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop_mananger\src\components\users\components\uCard\uCard.vue
-->
<template>
  <div class="uCard">
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="$refs.dialog.dialogVisible=true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 表格内容区 -->
      <u-table :userList="userList" :total="total" @resetUserEmit="resetUserEmit"/>
      <!-- 页码区 -->
      <u-pagination :pagenum="queryInfo.pagenum" :pagesize="queryInfo.pagesize" :total="total" @sizeChange="sizeChange" @pageChange="pageChange"/>
    </el-card>
    <u-add-dialog  ref="dialog" @resetUserEmit="resetUserEmit"/>
    <u-edit-dialog @resetUserEmit="resetUserEmit"/>
  </div>
</template>
<script>
  import UAddDialog from '../uAddDialog/uAddDialog.vue'
  import UEditDialog from '../uEditDialog/uEditDialog.vue'
  import UPagination from '../uPagination/uPagination.vue'
  import uTable from '../uTable/uTable.vue'
  export default {
  components: { 
    uTable,
    UPagination,
    UAddDialog,
    UEditDialog,
  },
  data() {
    return {
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:2
      },
      userList:[],
      total:0
    }
  },
  methods: {
    async getUserList(){
      const{data:res}=await this.$http.get('users',{
        params:this.queryInfo
      })
      //console.log(res);
      if(res.meta.status!==200)return this.$message.error('获取数据失败！')
      this.userList=res.data.users;
      this.total=res.data.total;
    },
    sizeChange(newSize){
      this.queryInfo.pagesize=newSize;
      this.getUserList();
    },
    pageChange(newPage){
      this.queryInfo.pagenum=newPage;
      this.getUserList();
    },
    resetUserEmit(){
      this.getUserList();
    }
   
  },
  created() {
    this.getUserList();
  },  

  }
</script>
<style lang="scss" scoped>
  .uCard {
    margin-top: 1%;
  }
</style>